<template>
  <el-dialog :title="$t('personal.updatePwd.title')" :visible.sync="showUpdatePwdDialog" width="700px" @closed="reset">
    <div class="base-modal-content">
      <!-- 内容主体区域 -->
      <el-form label-position="top" :model="savePwdForm" :rules="savePwdFormRules" ref="savePwdFormRef">
        <el-form-item :label="$t('personal.updatePwd.currPwd')" prop="pwd">
          <el-input type="password" show-password v-model="savePwdForm.pwd" :placeholder="$t('personal.updatePwd.inputCurrPwd')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('personal.updatePwd.newPwd')" prop="newPwd">
          <el-input type="password" show-password v-model="savePwdForm.newPwd" :placeholder="$t('personal.updatePwd.inputNewPwd')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('personal.updatePwd.confirmPwd')" prop="confirmPwd">
          <el-input type="password" show-password v-model="savePwdForm.confirmPwd" :placeholder="$t('personal.updatePwd.inputConfirmPwd')"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showUpdatePwdDialog = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="updatePwd" :disabled="pending">{{ $t('common.base.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import md5 from 'js-md5';
import { reLogin } from '@src/util/userCenter';
import { t } from '@src/locales'

export default {
  name: 'update-pwd',
  data() {
    return {
      pending: false,
      showUpdatePwdDialog: false,
      savePwdForm: {
        pwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      savePwdFormRules: {
        pwd: [{ required: true, message: t('personal.updatePwd.inputCurrPwd'), trigger: 'blur' }],
        newPwd:[{ required: true, message: t('personal.updatePwd.inputNewPwd'), trigger: 'blur' }],
        confirmPwd:[{ required: true, message: t('personal.updatePwd.inputConfirmPwd'), trigger: 'blur' }]
      },
    }
  }, 
  methods: {
    openDialog() {
      this.showUpdatePwdDialog = true;
    },
    async updatePwd(){
      try {
        const isValidate = await this.$refs.savePwdFormRef.validate();
        if (!isValidate) return;
        if (this.savePwdForm.newPwd != this.savePwdForm.confirmPwd) {
          return this.$platform.notification({
            title: t('common.base.tip.modifyFail'),
            message: t('common.validate.newloginPwdNotEqual'),
            type: 'error'
          })
        }
        /**
         * @description 效验密码正则
         * -- "大写字母，小写字母，数字，特殊符号 `@#$%^&*`~()-+=` 中任意3项密码" 8~20位
         * @see https://regexper.com/#%2F%5E%28%3F!%5Ba-zA-Z%5D%2B%24%29%28%3F!%5BA-Z0-9%5D%2B%24%29%28%3F!%5BA-Z%5CW_!%40%23%24%25%5E%26*%60~%28%29-%2B%3D%5D%2B%24%29%28%3F!%5Ba-z0-9%5D%2B%24%29%28%3F!%5Ba-z%5CW_!%40%23%24%25%5E%26*%60~%28%29-%2B%3D%5D%2B%24%29%28%3F!%5B0-9%5CW_!%40%23%24%25%5E%26*%60~%28%29-%2B%3D%5D%2B%24%29%5Ba-zA-Z0-9%5CW_!%40%23%24%25%5E%26*%60~%28%29-%2B%3D%5D%7B8%2C16%7D%24%2F
         */
        const validatePassWordReg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$/

        if (!validatePassWordReg.test(this.savePwdForm.newPwd)) {
          return this.$platform.notification({
            title: t('common.base.tip.modifyFail'),
            type: 'error',
            message: t('common.validate.loginPwdInvalid')
          })
        }
        this.pending = true 
        const params = {}
        params.oldPassword = md5(this.savePwdForm.pwd);
        params.newPassword = md5(this.savePwdForm.newPwd);
        params.repeatNewPassword = md5(this.savePwdForm.confirmPwd);

        const { status, message } = await this.$http.post(
          '/api/user/outside/multi/pwd/update/myself',
          params,
          false
        )
        this.pending = false
        if (status !== 0) return this.$platform.notification({
          title: t('common.base.tip.modifyFail'),
          message: message || '',
          type: 'error'
        })
        this.$refs.savePwdFormRef.resetFields()
        this.showUpdatePwdDialog = false
        this.$platform.notification({
          title: t('common.base.tip.modifySuccess'),
          type: 'success'
        })
        
        setTimeout(() => {
          reLogin()
        }, 1000);
      } catch (e) {
        console.error(e)
        this.pending = false
      }
    },
    reset(){
      this.$refs.savePwdFormRef.resetFields()
      this.showUpdatePwdDialog = false
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-dialog__headerbtn {
  top: 0!important;
}
</style>